<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { $t } from '@/locales';
import type { Notice } from '@/service/api';

defineOptions({
  name: 'LogLoginDetailModel'
});

interface Props {
  /** the edit row data */
  rowData?: Notice | null;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const title = computed(() => {
  return $t('common.detail');
});

type Model = Pick<Notice, 'id' | 'title' | 'publishStatus' | 'publisherName' | 'publishTime' | 'content'>;

const model: Model = reactive(createDefaultModel());

function createDefaultModel(): Model {
  return {
    id: 0,
    title: '',
    publishStatus: 0,
    publisherName: '',
    publishTime: undefined,
    content: ''
  };
}

const noticeContent = ref('');

function handleInitModel() {
  Object.assign(model, createDefaultModel());

  if (props.rowData) {
    Object.assign(model, props.rowData);
    noticeContent.value = model.content as string;
  }
}

function closeDrawer() {
  visible.value = false;
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});
</script>

<template>
  <NModal v-model:show="visible" :title="title" preset="card" class="w-50%">
    <NScrollbar class="max-h-200 pr-20px">
      <NDescriptions :column="1" label-placement="left" bordered>
        <NDescriptionsItem :label="$t('page.manage.notice.noticeTitle')">
          {{ model.title }}
        </NDescriptionsItem>
        <NDescriptionsItem :label="$t('page.manage.notice.publishStatus')">
          <NTag v-if="model.publishStatus === 0" type="info">
            {{ $t('page.manage.notice.publishStatusUnPublished') }}
          </NTag>
          <NTag v-else-if="model.publishStatus === 1" type="success">
            {{ $t('page.manage.notice.publishStatusPublished') }}
          </NTag>
          <NTag v-else-if="model.publishStatus === -1" type="warning">
            {{ $t('page.manage.notice.publishStatusRevoked') }}
          </NTag>
        </NDescriptionsItem>
        <NDescriptionsItem :label="$t('page.manage.notice.publisherName')">
          {{ model.publisherName }}
        </NDescriptionsItem>
        <NDescriptionsItem :label="$t('page.manage.notice.publishTime')">
          {{ model.publishTime }}
        </NDescriptionsItem>
        <NDescriptionsItem :label="$t('page.manage.notice.content')">
          <!-- eslint-disable-next-line vue/no-v-html -->
          <div class="notice-content" v-html="noticeContent"></div>
        </NDescriptionsItem>
      </NDescriptions>
    </NScrollbar>
    <template #footer>
      <NSpace justify="end" :size="16">
        <NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
